<template>
    <table id="sam" cellspacing="1" style="width: 100%;height: 100px;border: 1px solid #a8aeb2;">
         <tr class="tr" v-for="sams in labRecordSamList">
            <th v-for="sam in sams.itemsRecordSampleList"
                :class="{ 'thA': sam.fieldInput === '0', 'thB': sam.fieldInput === '1' }" :rowspan="sam.fieldRowspan > 0 ? sam.fieldRowspan : 1"  :colspan="sam.fieldColspan > 0 ? sam.fieldColspan : 1">
                <span v-if="sam.fieldInput === '0'">{{ sam.fieldName }}</span>
                <a-input :name="sam.fieldCode" v-else-if="sam.fieldInput === '1'" v-model:value="sam.fieldValue" size="large" class="input"  readonly="true"/>
            </th>
        </tr>
    </table>
</template>
  
<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
    labRecordSamList?: [{
        sId: string | number,
        itemsRecordSampleList: [{
            id: string | number,
            createBy: string,
            createTime: string,
            updateBy: string,
            updateTime: string,
            sysOrgCode: string,
            taskId: string,
            itemId: string,
            fieldName: string,
            fieldCode: string,
            fieldValue: string,
            fieldInput: string | number,
            fieldSort: number ,
            fieldType: string,
            fieldRow: number ,
            fieldCol: number ,
            fieldRowspan: number ,
            fieldColspan: number,
        }]
    }]
}>();

defineExpose({
    props,
});

</script>
  
<style scoped>
.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}

.thA {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thB {
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
}
</style>